<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <my-component></my-component>
            
        </div>
        <script src="../js/vue.js"></script>
        <script>
            // 定义组件   组件的配置对象 VueComponent
            
            const MyComponent = {
            /* 组件名称 -> 用于开发者调试工具显示组件名称
                data 有两种写法，对象形式和函数形式
                组件中必须用函数形式
             */
                data(){
                    return{
                        num:0,
                    };
                },
                name: "MyComponent",
                template : `<div>
                    <p>今晚月亮很美</p>
                    <p>{{num}}</p>
                    <button @click="num++">but</button>
                    </div>`,
            }
            const vm = new Vue({
                // 局部组件注册
                components:{
                    MyComponent,
                },
            });

            vm.$mount("#app");
        </script>
    </body>
</html>